<template>
  <view v-for="(item,i) of props.data" :key="i" style="margin-bottom: 20rpx">
    <view class="flex">
      <up-avatar shape="circle" size="35"
                 :src="`https://picsum.photos/id/${i+1}/200/300?random=${i}`"></up-avatar>
      <view style="margin-right: auto;margin-left: 20rpx" class="flex-column-between">
        <view class="u-f-sl" style="color: #FDA956">张三</view>
        <view class="u-f-sx item-time">2025/12/23 13:22 阅读人数23</view>
      </view>
      <view>1</view>
    </view>
    <view style="margin-left: 80rpx;color: #333" class="u-f-sl p-c-15">
      这里是内容区，包含了分享的内容，以及相关图片信息
    </view>
    <view style="margin-left: 80rpx;flex-wrap: wrap" class="flex-between img-list">
      <up-image shape="square" radius="12rpx" :show-loading="true" style="padding-bottom: 15rpx"
                :src="`https://picsum.photos/id/${i+1}/200/300?random=${i}`" width="192rpx"
                height="192rpx"></up-image>
      <up-image shape="square" radius="12rpx" :show-loading="true" style="padding-bottom: 15rpx"
                :src="`https://picsum.photos/id/${i+1}/200/300?random=${i}`" width="192rpx"
                height="192rpx"></up-image>
      <up-image shape="square" radius="12rpx" :show-loading="true" style="padding-bottom: 15rpx"
                :src="`https://picsum.photos/id/${i+1}/200/300?random=${i}`" width="192rpx"
                height="192rpx"></up-image>
      <up-image shape="square" radius="12rpx" :show-loading="true" style="padding-bottom: 15rpx"
                :src="`https://picsum.photos/id/${i+1}/200/300?random=${i}`" width="192rpx"
                height="192rpx"></up-image>
    </view>
    <view style="margin-left: 80rpx;padding-bottom: 15rpx" class="flex-between">
      <view class="flex">
        <up-image src="/static/icon/common/like.png" width="30rpx"
                  height="30rpx"></up-image>
        <text class="u-f-sx f-c-9">
          {{ numberFormat((i + 1) * 2545) }}
        </text>
      </view>
      <view class="flex">
        <up-image src="/static/icon/common/common.png" width="30rpx"
                  height="30rpx"></up-image>
        <text class="u-f-sx f-c-9">
          {{ numberFormat((i + 1) * 12345) }}
        </text>
      </view>
      <up-image src="/static/icon/common/share.png" width="30rpx"
                height="30rpx"></up-image>
    </view>
  </view>
</template>
<script lang="ts" setup>
import {numberFormat} from "@/util/number";

const props = defineProps({
  data: {
    type: Array,
    default: []
  }
})

</script>

<style scoped lang="scss">
@import "@/static/css/index.css";



/* 内容区域 - 初始状态 */
.content {
  background: #fff;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  transition: all 0.3s ease;
  width: 100%;
  height: 100%;
}


.img-list:last-child {
  margin-right: auto;
}


.item-time {
  color: rgba(0, 0, 0, 0.3);
  margin-top: 10rpx;
}


</style>